<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {FormInst, useMessage} from 'naive-ui';
import Editor from '@components/Editor'

const message = useMessage()

const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);

const about_us_form = ref<FormInst | null>(null);
const aboutUsForm = ref({
  title: '',
  content: ''
})
const aboutUsFormRules = ref({
  title: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请填写关于我们标题'
  },
})
const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  btnLoading.value = true;
  postPutRequest('conf/save_about', aboutUsForm.value).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          btnLoading.value = false;
        }
      })
    } else {
      message.error(result.message);
      btnLoading.value = false;
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'about'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {about} = JSON.parse(data);
    if (about) {
      aboutUsForm.value = {
        title: about.title ?? null,
        content: about.content ?? '',
      }
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings()
})
</script>

<template>
  <n-form
      ref="about_us_form"
      :model="aboutUsForm"
      :rules="aboutUsFormRules"
      require-mark-placement="left"
      label-placement="left" :label-width="110">
    <n-spin size="medium" v-model:show="loadings">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="6" label="关于我们:" path="title">
          <n-input v-model:value="aboutUsForm.title" placeholder="" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="关于我们内容:" path="content">
          <Editor v-model:value="aboutUsForm.content"/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;">
          <n-button type="primary" :loading="btnLoading" @click="handelSave">保存关于我们</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>